<template>
  <div class="rank">
    <van-sticky>
    <topbar class="rank-top" right-text="积分商城" @click-right="onClickRight" :border="false"></topbar>
    <div class="profit-box">
      <span class="profit-total">{{currentScoreText}}</span>
    </div>
    <van-row class="tab" type="flex" justify="center">
      <van-col span="12" style="border-right: 1px solid rgba(255,255,255,.5);" @click="changeType(1)">收入</van-col>
      <van-col span="12" @click="changeType(2)">支出</van-col>
    </van-row>
    </van-sticky>
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <!-- 收入 -->
      <van-cell :class="item.direction == 1 ? 'profit-in' : 'profit-out'" v-for="(item,index) in dataList" :key="index">
        <van-row>
          <van-col span="2">
            <van-icon :name="item.direction == 1 ? iconIn : iconOut" size="24" />
          </van-col>
          <van-col span="16">
            <van-row>
              <van-col>{{item.memo}}</van-col>
              <!-- <van-col class="size-s u-color-gray">已完成</van-col> -->
            </van-row>
            <van-row>
              <van-col class="u-color-gray size-s">{{item.changeTime}}</van-col>
            </van-row>
          </van-col>
          <van-col span="6" class="item-right">
            <van-row>
              <van-col span="24" class="profit-num">{{item.valueText}}</van-col>
            </van-row>
            <van-row>
              <van-col span="24">{{item.name}}</van-col>
            </van-row>
          </van-col>
        </van-row>
      </van-cell>
    </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      finished: false,
      iconIn: require("../../assets/img/profit-in.png"),
      iconOut: require("../../assets/img/profit-out.png"),
      currentScoreText: "",
      params: {
        direction: 0,
        pageIndex:1,
        pageSize:15
      },
      dataList: [],
      pullLoading: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    onRefresh(){
      this.pullLoading = true;
      this.changeType(this.params.direction)
    },
    changeType(type){
      this.dataList = [];
      this.finished = false
      this.params.pageIndex = 1;
      this.params.direction = type;
      this.getData();
    },
    getData() {
      this.loading = true;
      this.$http.post("customer/UserInfo/GetUserScoreLog", this.params).then(res => {
        this.loading = false;
        this.pullLoading = false;
        this.totalCount = res.data.Body.totalCount;
        this.currentScoreText = res.data.Body.currentScoreText;
        this.dataList = [...this.dataList,...res.data.Body.dataList];
        if(res.data.Body.dataList.length < this.params.pageSize){
          this.finished = true
        }
      });
    },
    onClickLeft() {
      history.go(-1);
    },
    onClickRight() {
      this.$toast("敬请期待");
    },
    onLoad() {
      ++this.params.pageIndex
      this.getData()
    }
  }
};
</script>
<style>
.rank .van-hairline--bottom::after {
  border: 0;
}
</style>
<style lang="less" scoped>
.rank {
  .size-s {
    margin-left: 5px;
  }
  .rank-top {
    background: #ff0015;
    color: #fff;
    /deep/ .van-nav-bar__title {
      color: #fff;
    }
    /deep/ .van-nav-bar__text {
      color: #fff;
      font-size: 16px;
    }
    /deep/ .van-icon {
      color: #fff;
    }
  }
  .tab {
    text-align: center;
    background: #ff0015;
    color: #fff;
    font-size: 18px;
    line-height: 2;
  }
  .item-right {
    text-align: right;
  }
  .profit-in {
    .profit-num {
      color: #2ac600;
    }
  }
  .profit-out {
    .profit-num {
      color: #ff8a00;
    }
  }
  .profit-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 100px;
    background: #ff0015;
    .profit-total {
      font-size: 24px;
    }
  }
}
</style>